<template>
  <div class="hello">
    <div id="diagram"></div>
    <!-- <div id="asddasasd" @click="ccc">666666</div> -->
  </div>
</template>

<script>
// import { sequence } from 'js-sequence-diagrams'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    this.init()
  },
  data() {
    return {
      mydiagram:null
    }
  },
  methods: {
    init() {
      /* eslint-disable */
      let str = `
          participant 情况上报
          participant 情况审批
          participant 预案匹配
          participant 方案筹划
          participant 处置完成
          
          Title:情况处置 XXX地区情况处置
					情况上报->情况审批: 2024年5月1日上报情况
					情况审批->情况上报: 2024年5月1日审批驳回
					情况审批-->预案匹配: 2024年5月1日预案匹配
					预案匹配->>方案筹划: 2024年5月1日方案筹划[color="red", fontcolor="blue"]
          Note right of 处置完成:方案筹划完成开始情况处置
					方案筹划-->>处置完成: 2024年5月1日处置完成
        `
          
      // this.mydiagram = Diagram;
      Diagram.parse(str).drawSVG("diagram", {theme: 'simple'})
      // this.mydiagram.drawSVG("diagram", {theme: 'simple'});
    },
    ccc() {
      document.getElementById('diagram').innerHTML = ''
      let str = `Title: Here is a title
					A->B: Normal line
					B->A: Normal line2
					B-->C: Dashed line
					C->>D: Open arrow
          Note right of D: this is\\nNote right
					D-->>A: Dashed open arrow`
      Diagram.parse(str).drawSVG("diagram", {theme: 'simple'});
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
 /* 箭头的文字颜色> */
.signal text { 
    fill: green;
}
.signal text:hover {
    fill: #aaaaaa
}
/* Note的背景颜色 */
.note rect, .note path {
    fill: #ffff00;
    /* 边框颜色 */
    stroke: #04adc4;
}
/* Note的文字颜色 */
.note tspan {
  fill: aqua;
}
/* participant的背景颜色 */
.title rect, .title path,
.actor rect, .actor path {
    fill: red;
    /* 边框颜色 */
    stroke:#04adc4;
}
/* participant的文字颜色 */
.title tspan,
.actor tspan {
    fill: blue;
}
/* 箭头颜色 */
marker {
  fill: orange;
}
/* 箭头前边连接线颜色 */
.signal line {
  stroke: orange;
}

/* 两根participant的链接线 */
.sequence > line {
  stroke: #00ff73;
}
</style>
